<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div class="test"></div>
    <div class="test2"></div>

    <!-- js按顺序引入 -->
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/new/react.development.js"></script>

    <!-- 引入react-dom,用于操作dom -->
    <script type="text/javascript" src="../js/new//react-dom.development.js"></script>

    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/new//babel.min.js"></script>

    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../js/new//prop-types.js"></script>

    <script type="text/babel">
        // 1.创建类式组件 组件名首字母必须大写
        class Count extends React.Component{   
          state = {newsArr:[]}
          componentDidMount(){
           setInterval(()=>{
            const {newsArr} = this.state
            const news = '新闻'+(newsArr.length+1)
                this.setState({newsArr:[news,...newsArr]})
           },1000)
          }

getSnapshotBeforeUpdate(){
    return this.refs.list.scrollHeight
}

// 之前的props 之前的state getSnapshotBeforeUpdate钩子return的值
componentDidUpdate(preProps,preState,height){
this.refs.list.scrollTop += this.refs.list.scrollHeight - height
}


            render(){
                return (
                    <div>
                       <div className="list" ref="list">
                        {
                            this.state.newsArr.map((item,index)=>{
return <div key={index} className="news">{item}</div>
                            })
                        }
                        </div>
                        </div>
                    )
            }

        }
 
      // 2.渲染虚拟Dom 
      ReactDOM.render(<Count/>, document.querySelector(".test"));
    
    
    </script>
</body>
<style>
    .list {
        width: 500px;
        height: 350px;
        background: paleturquoise;
        overflow: auto;
    }

    .news {
        width: 500px;
        height: 50px;

    }
</style>

</html>